<template>
	<view class="container">
		<view class="jindu">
			<u-steps :list="numList" :current="number" mode="number"></u-steps>
		</view>
		<view class="things-info">
			<view class="info-item">
				<view class="info-item-left">事件编号:</view>
				<view class="info-item-right">{{ thingsInfo.id }}</view>
			</view>
			<view class="info-item">
				<view class="info-item-left">提报人:</view>
				<view class="info-item-right">{{ thingsInfo.person }}</view>
			</view>
			<view class="info-item">
				<view class="info-item-left">提报时间:</view>
				<view class="info-item-right">{{ thingsInfo.time }}</view>
			</view>
			<view class="info-item">
				<view class="info-item-left">所属网格:</view>
				<view class="info-item-right">{{ thingsInfo.grid }}</view>
			</view>
			<view class="info-item">
				<view class="info-item-left">事件标题:</view>
				<view class="info-item-right">{{ thingsInfo.title }}</view>
			</view>
			<view class="info-item">
				<view class="info-item-left">发生日期:</view>
				<view class="info-item-right">{{ thingsInfo.date }}</view>
			</view>
			<view class="info-item">
				<view class="info-item-left">发生地点:</view>
				<view class="info-item-right">{{ thingsInfo.address }}</view>
			</view>
			<view class="info-item">
				<view class="info-item-left">事件规模:</view>
				<view class="info-item-right">{{ thingsInfo.guiMo }}</view>
			</view>
			<view class="info-item">
				<view class="info-item-left">事件类型:</view>
				<view class="info-item-right">{{ thingsInfo.type }}</view>
			</view>
			<view class="info-item">
				<view class="info-item-left">涉及人数:</view>
				<view class="info-item-right">{{ thingsInfo.perNum }}</view>
			</view>
			<view class="info-item">
				<view class="info-item-left">涉及单位:</view>
				<view class="info-item-right">{{ thingsInfo.company }}</view>
			</view>
			<view class="info-item">
				<view class="info-item-left">事件描述:</view>
				<view class="info-item-right">{{ thingsInfo.content }}</view>
			</view>
			<view class="info-item">
				<view class="info-item-left">事件等级:</view>
				<view class="info-item-right">{{ thingsInfo.dengJi }}</view>
			</view>
			<view class="info-item">
				<view class="info-item-left">当事人:</view>
				<view class="info-item-right">{{ thingsInfo.DangShiR }}</view>
			</view>
			<view class="info-address">
				<view class="address-img"><image mode="heightFix" src="../../static/icon/dizhi.png"></image></view>
				<view class="address-text">{{ thingsInfo.address }}</view>
			</view>
		</view>
		
		<view class="buzou">
			<view class="buzou-head">事件历程</view>
			<view class="buzou-con" v-if="dislist.length == 0">暂无进程</view>
			<view class="buzou-content">
				<u-time-line>
					<u-time-line-item  v-for="(item,index) in dislist" :key="index">
						<template>
							<view class="u-node" style="background: #19be6b;">
								<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view class="info">
								<!-- <view class="u-order-desc font" >
									<rich-text :nodes="item.disposeOpinion"></rich-text>
								</view> -->
								<view class="">发生时间：{{item.happenDate}}</view>
								<view class="">事件流程类型：{{item.type}}</view>
								<view class="">事件处理状态：{{item.status}}</view>
								<view class="">处理日期：{{item.disposeDate}}</view>
								<view class="">处理结果：{{item.disposeResult || '暂无'}}</view>
								<view class="">审核状态：{{item.auidType||'暂无'}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>
		<view class="info-bottom">
			<view @click="handleGoThingsConfirm" class="bottom">处理事件</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				thingsInfo:{
					id:'',
					person:'暂无资料',
					time:'',
					grid:'',
					title:'',
					date:'',
					address:'',
					guiMo:'暂无资料',
					type:'暂无资料',
					perNum:1,
					company:'暂无资料',
					content:'',
					dengJi:'一般性',
					DangShiR:'暂无资料'
				},
				id:'',
				numList: [{
					name: '待接收'
				}, {
					name: '待处理'
				}, {
					name: '待核查'
				}, {
					name: '已完结'
				},],
				id:'',
				number:1,
				dislist:[
					// {
					// 	disposeOpinion:'<h3>一阶段</h3>',
					// 	createTime:'2020-02-12'
					// }
				],
				dictList:[],
				dictList2:[],
				dictList3:[],
				dictList4:[]
			}
		},
		onLoad(options) {
			// console.log(options)
			this.id = options.id
		},
		created() {
			//
		},
		mounted() {
			this.getDictionaries()
			this.getDictionaries2()
			this.getDictionaries3()
			this.getDictionaries4()
			this.getEventDetail()
		},
		methods:{
			handleGoThingsConfirm() {
				uni.navigateTo({
					url:'../ThingsList/ThingsConfirm/ThingsConfirm?id='+this.id
				})
			},
			// 获取事件类型
			getDictionaries() {
				let params = {
					dictCode:'grid_event_type_dict'
				}
				this.$u.api.dictionaries(params)
					.then(res => {
						// console.log(res)
						if(res.code == 200) {
							res.result.forEach(item => {
								this.dictList.push({
									value:item.value,
									label:item.text
								})
							})
						}
					})
					.catch(err => {
						console.log(err)
						this.$refs.uToast.show({
							title: '获取事件类型失败'
						})
					})
			},
			// 获取审核状态
			getDictionaries2() {
				let params = {
					dictCode:'audit_status_dict'
				}
				this.$u.api.dictionaries(params)
					.then(res => {
						// console.log(res)
						if(res.code == 200) {
							res.result.forEach(item => {
								this.dictList2.push({
									value:item.value,
									label:item.text
								})
							})
						}
					})
					.catch(err => {
						console.log(err)
						this.$refs.uToast.show({
							title: '获取审核状态失败'
						})
					})
			},
			// 获取事件流程处理状态
			getDictionaries3() {
				let params = {
					dictCode:'grid_event_flow_status_dict'
				}
				this.$u.api.dictionaries(params)
					.then(res => {
						// console.log(res)
						if(res.code == 200) {
							res.result.forEach(item => {
								this.dictList3.push({
									value:item.value,
									label:item.text
								})
							})
						}
					})
					.catch(err => {
						console.log(err)
						this.$refs.uToast.show({
							title: '获取事件流程处理状态失败'
						})
					})
			},
			// 获取事件流程类型
			getDictionaries4() {
				let params = {
					dictCode:'grid_event_flow_type_dict'
				}
				this.$u.api.dictionaries(params)
					.then(res => {
						// console.log(res)
						if(res.code == 200) {
							res.result.forEach(item => {
								this.dictList4.push({
									value:item.value,
									label:item.text
								})
							})
						}
					})
					.catch(err => {
						console.log(err)
						this.$refs.uToast.show({
							title: '获取事件流程类型失败'
						})
					})
			},
			
			// 获取事件详情
			getEventDetail() {
				let params = {
					eventId:this.id
				}
				this.$u.api.getEventDetail(params)
					.then(res => {
						console.log(res)
						if(res.code == 200){
							this.number = res.result.event.eventStatus
							this.thingsInfo.id = res.result.event.id
							this.thingsInfo.time = res.result.event.submitDate
							this.thingsInfo.grid = res.result.event.gridName
							this.thingsInfo.title = res.result.event.title
							this.thingsInfo.date = res.result.event.submitDate
							this.thingsInfo.address = res.result.event.address
							this.thingsInfo.content = res.result.event.content
							this.dictList.forEach(it => {
								if(res.result.event.eventType == it.value) {
									this.thingsInfo.type = it.label
								}
							})
							res.result.flowList.forEach(item => {
								let type = ''
								let status = ''
								let auidType = ''
								this.dictList4.forEach(it => {
									if(item.flowType == it.value) {
										type = it.label
									}
								})
								this.dictList3.forEach(it => {
									if(item.eventFlowStatus == it.value) {
										status = it.label
									}
								})
								this.dictList2.forEach(it => {
									if(item.auditStatus == it.value) {
										auidType = it.label
									}
								})
								this.dislist.push({
									happenDate:item.happenDate,
									type,
									status,
									disposeDate:item.disposeDate,
									disposeResult:item.disposeResult,
									auidType
								})
							})
						}
					})
					.catch(err => {
						console.log(err)
					})
			}
 		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color: #f5f6f7;
		min-height: 100vh;
		padding-bottom: 150rpx;
		.jindu{
			padding: 20rpx;
			background-color: #fff;
		}
		.buzou{
			background-color: #fff;
			padding-bottom: 20rpx;
			.buzou-head{
				font-weight: 600;
				font-size: 28rpx;
				color: #000;
				padding: 20rpx;
				width: 100%;
				text-align: left;
			}
			.buzou-con{
				width: 100%;
				padding: 30rpx;
				text-align: center;
				color: #999;
				font-size: 30rpx;
				font-weight: 600;
			}
			.buzou-content{
				padding: 0 50rpx;
				.info{
					color: #333;
					font-size: 26rpx;
				}
			}
		}
		.things-info{
			background-color: #fff;
			margin: 20rpx 0;
			padding: 20rpx;
			.info-item{
				display: flex;
				padding: 10rpx 0;
				.info-item-left{
					flex: 2;
					font-size: 27rpx;
					color: #999;
				}
				.info-item-right{
					flex: 6;
					font-size: 27rpx;
					color: #333;
				}
			}
			.info-address{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.address-img{
					height: 40rpx;
					margin-right: 5rpx;
					image{
						height: 100%;
					}
				}
				.address-text{
					color: #555;
					font-size: 25rpx;
				}
			}
		}
		.info-bottom{
			display: flex;
			justify-content: space-around;
			align-items: center;
			position: fixed;
			width: 100%;
			height: 120rpx;
			left: 0;
			bottom: 0;
			border-top: 1px solid #f4f1f1;
			background-color: #f5f6f7;
			z-index: 10;
			.bottom{
				width: 80%;
				height: 80rpx;
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				font-weight: 600;
				background-color: #007AFF;
				color: #fff;
			}
		}
	}
	.font{
		font-weight: bold;
		font-size: 17px;
	}
	.mar{
		margin-top: 20rpx;
		font-size: 2px;
	}
	.info{
		background-color: #f1f1f1;
		padding: 10rpx 10rpx;
	}
	.u-dot{
		background: #0079FF !important;
	}
</style>
